<template>
    <div id="detail">
        <DetailNavBar class="detail-nav"  @titleClick="titleClick" ref="Nav"/>
        <Scroll class="content" ref="scroll" :probeType="3"  @scroll="contentScroll" >
        <DetailSwiper :topImages="topImages" />
        <detail-base-info :goods="goods" />
        <detail-shop-info :shop="shop" />
        <detail-goods-info :datainfo="detailInfo" @imageLoad="imageLoad"/>
        <detail-param-info :paraminfo="ParamInfo" ref="params"/>
        <detail-comment-info :commentInfo="commentInfo" ref="comment"/>
        <GoodsList :goods="recommends" ref="recommend"/>
        </Scroll>
        <BackTop @click.native="backClick" v-show="isShowBackTop"/>
        <detailbottom-bar @addcart="addCart"/>
    </div>
</template>

<script>
   import DetailNavBar from "./childComps/DetailNavBar";
   import {getDetail,  Goods, Shop, GoodsParam, getRecommend} from "network/detail";
   import DetailBaseInfo from "./childComps/DetailBaseInfo";
   import DetailShopInfo from "./childComps/DetailShopInfo";
   import DetailSwiper from "./childComps/DetailSwiper";
   import Scroll from "components/common/scroll/Scroll";
   import DetailGoodsInfo from "./childComps/DetailGoodsInfo";
   import DetailParamInfo from "./childComps/DetailParamInfo";
   import DetailCommentInfo from "./childComps/DetailCommentInfo";
   import GoodsList from "components/content/goods/GoodsList";
   import {itemListtenerMixin, backTopMixin} from "common/mixin";
   import DetailbottomBar from "./childComps/DetailbottomBar";

   export default {
        name: "Detail",
        components: {
            DetailNavBar,
            DetailSwiper,
            DetailBaseInfo,
            DetailShopInfo,
            Scroll,
            DetailGoodsInfo,
            DetailParamInfo,
            DetailCommentInfo,
            GoodsList,
            DetailbottomBar,
        },
       mixins: [itemListtenerMixin,backTopMixin],
        data() {
            return {
                iid: null,
                topImages: [],
                goods: {},
                shop: {},
                detailInfo: {},
                ParamInfo: {},
                commentInfo: {},
                recommends: [],
                themeTopY: [],
                currentIndex: 0,
            }
        },
        created() {
            //保存传入id
            this.iid = this.$route.params.iid

            //根据id获取数据
            getDetail(this.iid).then(res => {
                const data=res.result
                //console.log(data);
                //获取顶部图片
                this.topImages = res.result.itemInfo.topImages
                //获取商品信息
                this.goods = new Goods(data.itemInfo,data.columns,data.shopInfo.services);
                //创建店铺信息
                this.shop = new Shop(data.shopInfo);
                //保存商品详情数据
                this.detailInfo = data.detailInfo;
                //获取参数信息
                this.ParamInfo = new GoodsParam(data.itemParams.info,data.itemParams.rule);
                //去除评论信息
                if (data.rate.cRate !== 0){
                    this.commentInfo = data.rate.list[0]
                }
            })
            //请求推荐数据
            getRecommend().then(res => {
                this.recommends = res.data.list
            })
        },
        methods: {
            imageLoad() {
                //监听itemimage加载完成
                this.$refs.scroll.refresh();

                this.themeTopY= []
                this.themeTopY.push(0);
                this.themeTopY.push(this.$refs.params.$el.offsetTop);
                this.themeTopY.push(this.$refs.comment.$el.offsetTop);
                this.themeTopY.push(this.$refs.recommend.$el.offsetTop);
                this.themeTopY.push(Number.MAX_VALUE);
                //console.log(this.themeTopY);
            },
            titleClick(index) {
                //console.log(index);
                this.$refs.scroll.scrollTo(0,-this.themeTopY[index],200)
            },
            contentScroll(position) {
                this.isShowBackTop = (-position.y) > 1000
                //console.log(position);
                const positionY = -position.y
                const length= this.themeTopY.length
                for( let i=0; i<length-1;i++){
                   // this.currentIndex!==i && (i<length-1 && positionY>=this.themeTopY[i] && positionY<=this.themeTopY[i+1]) || (i===length-1 &&  positionY>=this.themeTopY[i])
                    if( this.currentIndex !== i && (positionY >= this.themeTopY[i] && positionY < this.themeTopY[i+1])){
                        this.$refs.Nav.currentIndex=i
                    }
                }
            },
            addCart() {
                //console.log("jr");
                //获取添加到购物车的数据
                const product = {}
                product.image = this.topImages[0]
                product.title = this.goods.title
                product.desc = this.goods.desc
                product.price = this.goods.realPrice
                product.iid = this.iid
                product.checked = false
                product.oldPrice = this.goods.oldPrice
                this.$store.commit('addCart',product)
               // this.$store.dispatch('addCart',product)
            }
        },

    }
</script>

<style scoped>
    #detail{
        position: relative;
        z-index: 9;
        background-color: #fff;
        height: 100vh;
    }
    .detail-nav{
        position: relative;
        z-index: 9;
        background-color: #fff;
    }
    .content{
        height: calc(100% - 44px);
    }
</style>